<template>
	<view>
		<view class="box1 ">
			<view class="">1 / 100</view>
			<view class="box1-1 check">
				<image src="/static/index1/55.png" mode="widthFix"></image>
				12
			</view>
			<view class="box1-1">
				<image src="/static/index1/56.png" mode="widthFix"></image>
				12
			</view>
		</view>
		
		<view class="word-box d-c-s">
			<view class="word  fweib" >
				<image :src="imgs[imgVal]" mode="widthFix"></image>
			</view>
			<view class="pronounce " >
				v. 未击中; 错过; 想念; 留恋; 未注意到; 不理解; 避开; 发觉丢失; 未赶上（飞机、火车等）
			</view>
			<view class="box2 d-s-c">
				<view class="box2-1 f32 d-c fweib">
					<image src="/static/index1/26.png" mode="widthFix"></image>
					<text>370次</text>
				</view>
				<view class="box2-2 f32 d-c fweib">
					<image src="/static/index1/25.png" mode="widthFix"></image>
					<text>370次</text>
				</view>
			</view>
		</view>
		
		<view class="box3">
			<view class="box3-1" :class="{correct:active === 1,wrong:active === 2}">
				<view class="">spring</view>
			</view>
			<view class="box3-1" >
				<view class="">take</view>
			</view>
			<view class="box3-1">
				<view class="">miss</view>
			</view>
			<view class="box3-1">
				<view class="">square</view>
			</view>
		</view>
		
		<view class="box4 d-b-c">
			<view class="box4-1 d-c-c">
				<image src="/static/index1/57.png" mode="widthFix"></image>
				<text>收藏</text>
			</view>
			<view class="box4-1 d-c-c">
				<image src="/static/index1/58.png" mode="widthFix"></image>
				<text>提示</text>
			</view>
			<view class="btn">移除词</view>
			<view class="btn">不认识</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgVal:1,
				imgs:{
					1:require('@/static/index1/33.png'),
					2:require('@/static/index1/34.png'),
					3:require('@/static/index1/35.png'),
					3:require('@/static/index1/36.png'),
				},
				active:1,
			};
		}
	}
</script>

<style lang="less" scoped>
page{
	background-color: #EEFAFF;
	padding: 20rpx 30rpx 0;
	position: relative;
	height: calc(100vh - 80rpx);
}
.box1{
	display: flex;
	align-items: center;
	.box1-1{
		&.check{
			margin-right: 43rpx;
			margin-left: auto;
		}
		image{
			width: 30rpx;
		}
	}
	
}
.word-box{
	flex-direction: column;
	.word{
		font-size: 64rpx;
		image{
			width: 90rpx;
			margin-left: 10rpx;
		}
	}
	.pronounce{
		margin-top: 20rpx;
		.pronounce-box{
			font-size: 20rpx;
			color: #999999;
			&:nth-child(1){
				margin-right: 46rpx;
			}
		}
		image{
			width: 30rpx;
			margin-left: 10rpx;
		}
	}
	.box2{
		margin-top: 20rpx;
		.box2-1{
			color: #058FFB;
			margin-right: 18rpx;
		}
		
		.box2-2{
			color: #FF6010;
		}
		image{
			width: 60rpx;
			margin-right: 10rpx;
		}
	}
}

.box3{
	margin-top: 132rpx;
	.box3-1{
		background: rgba(75,176,255,0.5);
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		padding: 55rpx 20rpx;
		font-size: 36rpx;
	}
	
	.correct{
		background-color: #00FF5E;
	}
	.wrong{
		background-color: #FF0004;
	}
	
}

.box4{
	bottom: 0;
	height: 10vh;
	left: 0;
	right: 0;
	padding: 0 30rpx;
	position: absolute;
	background-color: #fff;
	.box4-1{
		margin-right: 30rpx;
		flex-direction: column;
		color: #666;
		image{
			width: 52rpx;
			margin-bottom: 5rpx;
		}
	}
	
	.btn{
		width: 250rpx;
		height: 80rpx;
		background: #0B99FE;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align:center;
		color: #fff;
		&:nth-last-child(1){
			background: #F59A2C;
		}
	}
}

</style>
